<template>
  <!--重点产品现状分析功能-->
  <div class="rightBox product-right">
    <div class="topBox">
      <el-select v-model="value" @change="initData" placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-row>
        <el-col span="12">
          <div style="margin:0 .5vw">
            <chart-block chartID="chart6" :title="optionData.title" :optionData="optionData" chartType="getBar"
                         height="43vh" style="padding:0 1vh 2vh 0;margin-top:1vh;"></chart-block>
          </div>
        </el-col>
        <el-col span="12">
          <div style="margin:0 .5vw">
            <chart-block chartID="chart1" :title="BlockLineOptionData.title" :optionData="BlockLineOptionData"
                         chartType="getShadowLine" height="43vh" style="padding:0 1vh 2vh 0;margin-top:1vh;"
                         titleType="blueBig"></chart-block>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bottomBox">
      <el-col span="12">
        <div style="margin:0 .5vw">
          <table-block :oprData="oprData" :isTitle="true" :title="youjiTitle" :pageSize="pageSize" :total="total"
                       @currentChange="currentChange" :currePage="currePage"></table-block>
        </div>
      </el-col>
      <el-col span="12">
        <div style="margin:0 .5vw">
          <table-block :oprData="oprDataWgh" :isTitle="true" :title="wghTitle" :pageSize="pageSizeWgh" :total="totalWgh"
                       @currentChange="currentChangeWgh" :currePage="currePageWgh"></table-block>
        </div>
      </el-col>
    </div>
  </div>
</template>

<script>
import {
  getCompanyCommonData, getcompanyData2,
  getConsumeData,
  geteconomyData5, getCommonData10
} from '@/api/pages.js'

export default {
  name: "index-mining",
  components: {
    ChartBlock: () => import('@/components/chart-block'),
    TableBlock: () => import('@/components/table-block'),
  },
  props: {},
  data() {
    return {
      options: this.initYearList(),
      value: this.getLastYear()-1,
      optionData: {
        seriesData: [
          {
            name: '', //如果有图例，这个就不能为空
            data: [], //数据
            unit: '', //数据的单位
          }, {
            name: '', //如果有图例，这个就不能为空
            data: [], //数据
            unit: '', //数据的单位
          }, {
            name: '', //如果有图例，这个就不能为空
            data: [], //数据
            unit: '', //数据的单位
          },
        ],
        BarGradientColor: [//柱状图渐变色
          {
            topColor: '#0DCCFF',
            bottomColor: '#4760FF'
          },
          {
            topColor: '#47FF72',
            bottomColor: '#E587FE'
          },
        ],
        lineColor: {
          linearColor: '#FF9F15',//线条颜色
          radiusColor: '#FF9F15',//折线点颜色
          borderColor: '#a6660d',//折线点边框颜色
        }
      },
      BlockLineOptionData: {
        LinearGradientColor: [//柱状渐变颜色
          {
            topColor: 'rgba(0,88,255,0.8)',
            bottomColor: 'rgba(0,88,255,0.1)',
            LineCircleColor: "#0058FF",//折线图颜色
            LineCircleBorderColor: "#00eaff",//折线图描边颜色
          },
          {
            topColor: 'rgba(211,89,0,0.8)',
            bottomColor: 'rgba(211,89,0,0.1)',
            LineCircleColor: "#D35900",//折线图颜色
            LineCircleBorderColor: "#F28E26",//折线图描边颜色
          }
        ],
        seriesData: [
          {
            name: '', //如果有图例，这个就不能为空
            data: [], //数据
            unit: '', //数据的单位
          },
        ],
      },
      pageSize: document.body.clientWidth > 1400 ? 15 : 8,
      total: 0,
      totalPage: 0,
      oprData: {
        list: [],
        tableData: [],
      },
      currePage: 1,
      pageSizeWgh: document.body.clientWidth > 1400 ? 15 : 8,
      totalWgh: 0,
      totalPageWgh: 0,
      oprDataWgh: {
        list: [],
        tableData: [],
      },
      currePageWgh: 1,
      youjiTitle: '有机农产品区县榜单',
      wghTitle: '无公害农产品区县榜单',
    }
  },
  computed: {},
  created() {
  },
  watch: {
    'value': 'initData'
  },
  mounted() {
    console.log(this.value, 'this.value')
    this.geteconomyData5('NY01', this.value);
    this.getConsumeData('NY02', this.value);
    this.getCompanyData2('NY04', 1, this.pageSize);
    this.getCompanyData2Wgh('NY03', 1, this.pageSizeWgh);
  },
  methods: {
    getLastYear(){
      let myDate = new Date();
      let year =  myDate.getFullYear()-1;
      return year;
    },
    initYearList(){
      let year = this.getLastYear();
      let yearList = new Array();
      for(let i = 0;i<10;i++){
        let obj = new Object();
        obj.value=year;
        obj.label=year;
        yearList.push(obj);
        year = year-1;
      }
      return yearList;
    },
    initData() {
      this.$emit('getCurYear', this.value)
      this.geteconomyData5('NY01', this.value);
      this.getConsumeData('NY02', this.value);
      this.getCompanyData2('NY04', 1, this.pageSize);
      this.getCompanyData2Wgh('NY03', 1, this.pageSizeWgh);
    },
    currentChangeWgh(e) {
      this.currePageWgh = e
      this.getCompanyData2Wgh('NY03', e, this.pageSizeWgh)
    },
    // 有机农产品区县榜单
    getCompanyData2(busiCode, current, size) {
      getcompanyData2(busiCode, current, size).then(res => {
        if (res.data.code === 200) {
          this.oprData.list = res.data.data.list.records
          this.total = res.data.data.list.total
          this.oprData.tableData = res.data.data.tableData
        }
      }).catch(err => {

      })
    },
    // 无公害农产品区县榜单
    getCompanyData2Wgh(busiCode, current, size) {
      getcompanyData2(busiCode, current, size).then(res => {
        if (res.data.code === 200) {
          this.oprDataWgh.list = res.data.data.list.records
          this.totalWgh = res.data.data.list.total
          this.oprDataWgh.tableData = res.data.data.tableData
        }
      }).catch(err => {

      })
    },

    // 经济指标挖掘分析-经济增长衡量指数-工农业生产总值变化
    geteconomyData5(busiCode, year) {
      getCommonData10({busiCode: busiCode, year: year}).then(res => {
        if (res.data.code == 200) {
          this.optionData = {
            title: res.data.data.title,
            categoryAxis: res.data.data.categoryAxis, //类目轴数据
            seriesData: res.data.data.seriesData,
            color: ["#03cefa", "#f1db25", "#fd664d"],
            // isLine: true,
            LinearGradientColor: [//柱状图渐变色
              {
                topColor: 'rgba(12, 252, 255, 1)',
                bottomColor: 'rgba(77,228,229, 0)'
              },
              {
                topColor: '#47FF72',
                bottomColor: '#E587FE'
              },
            ]
          }
        }
      }).catch(err => {

      })
    },
    getConsumeData(busiCode, year) {
      getCommonData10({busiCode: busiCode, year: year}).then(res => {
        if (res.data.code == 200) {
          var datas = res.data.data.seriesData[0].data
          this.BlockLineOptionData = {
            title: res.data.data.title,
            categoryAxis: res.data.data.categoryAxis, //类目轴数据
            seriesData: res.data.data.seriesData,
            smooth: true,
            legendShow: 'no',
            LinearGradientColor: [//柱状渐变颜色
              {
                topColor: 'rgba(211,89,0,0.8)',
                bottomColor: 'rgba(211,89,0,0.1)',
                LineCircleColor: "#D35900",//折线图颜色
                LineCircleBorderColor: "#F28E26",//折线图描边颜色
              }
            ],
            min: Math.floor(Math.min(...datas))//最小值
          }
        }
      }).catch(err => {

      })
    },
  },
}
</script>
<style lang="scss">
.rightBox.product-right {
  .el-input__inner {
    background: url("../../../assets/images/product/select-bg.png");
    border: 1px solid #00BAD8;
    color: #E7FFFC;
    height: 30px;
    line-height: 30px;
    width: 120px;
  }

  .el-select .el-input .el-input__suffix-inner {
    display: inline-block;
    height: 30px;
    width: 30px;
    background: url("../../../assets/images/product/select-icon.png") no-repeat center center;
  }

  .el-select .el-input .el-select__caret {
    display: none;
  }

}
.el-select-dropdown {
  background-color: #0a5359;
  border: 1px solid #00BAD8;
  .el-select-dropdown__item {
    color: #E7FFFC;
  }
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    color: #fff;
    background-color: #02262d;
  }
}
</style>
<style lang="scss">
.rightBox.product-right {
  width: 100%;
  height: 100%;

  .topBox {
    width: 100%;
    height: 54%;

    .el-row {
      height: calc(100% - 40px);
    }
  }

  .bottomBox {
    width: 100%;
    height: 41%;
    //margin-top: 1.5vh
  }
}
</style>
